@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700");
body {
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: .5em;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: .8rem;
}

.container {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto;
}

.timeline-item {
  padding: 3em 2em 2em;
  position: relative;
  color: rgba(0, 0, 0, 0.7);
  border-left: 2px solid rgba(0, 0, 0, 0.3);
}
.timeline-item p {
  font-size: 1rem;
}
.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  left: 2em;
  font-weight: bold;
  top: 1em;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.0rem;
}
.timeline-item::after {
  width: 10px;
  height: 10px;
  display: block;
  top: 1em;
  position: absolute;
  left: -7px;
  border-radius: 10px;
  content: '';
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
}
.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
     border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
     border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
}
// ----------------  THE BASICS

@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700');

body {
	font-size: 14px;
	line-height: 1.5;
}

// ----------------  THE FONTS

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
}
//标题设置
h1 {
	font-size: 1.5rem;
	margin-bottom: .5em;
}

p {
	font-family: 'Roboto', sans-serif;
	font-size: .8rem;
}

// ----------------  LAYOUT

.container {
	max-width: 1024px;
	width: 90%;
	margin: 0 auto;
}

// ----------------  THE FONTS

$border-color: rgba(black, .3);

.timeline-item {
	padding: 3em 2em 2em;
	position: relative;
	color: rgba(black, .7);
	border-left: 2px solid $border-color;
	
	p {
		font-size: 1rem;
	}
  //div中显示的日期样式
	&::before {
		content: attr(date-is);
		position: absolute;
		left: 2em;
		font-weight: bold;
		top: 1em;
		display: block;
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		font-size: 1.0rem;
	}

	&::after {
		width: 10px;
		height: 10px;
		display: block;
		top: 1em;
		position: absolute;
		left: -7px;
		border-radius: 10px;
		content: '';
		border: 2px solid $border-color;
		background: white;
	}

	&:last-child {
		border-image: linear-gradient(
			to bottom,
			$border-color 60%,
			rgba($border-color, 0)) 1 100%
		;
	}
}